<template>
  <el-card shadow="never" body-class="p-3" class="mb-1 cursor-pointer">
    <h2 class="text-lg font-bold">区块卡片</h2>
    <h3 class="text-sm">打底时间(分钟): 30</h3>
    <h3 class="text-sm">简单元件(分钟*数量=总分钟): 25*20=500</h3>
    <h3 class="text-sm">复杂元件(分钟*数量=总分钟): 50*3=150</h3>
    <h3 class="text-sm">缓冲时间占比: 20%</h3>
    <h3 class="text-sm">自测时间(分钟): 60</h3>
    <h3 class="text-sm">mock接口(分钟*数量=总分钟): 20*10=200</h3>
    <h3 class="text-sm">总计(分钟): (500+150+30)*1.2=816</h3>
    <div class="list-panel-wrapper">
      <ul class="flex flex-row flex-wrap">
        <li>节流</li>
        <li>防抖</li>
        <li>接口数据缓存</li>
        <li>ajax可取消</li>
        <li>成功提示</li>
        <li>异常提示</li>
        <li>数据验证</li>
        <li>动效</li>
        <li>响应式适配</li>
        <li>多语言适配</li>
        <li>ui还原: 间距</li>
        <li>ui还原: 阴影</li>
        <li>ui还原: 圆角</li>
        <li>ui还原: 字体与字体大小</li>
      </ul>
    </div>
  </el-card>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.list-panel-wrapper li {
  font-size: 13px;
  border: 1px solid #333;
  margin-right: 4px;
  margin-top: 4px;
  padding: 2px;
}
</style>
